<template>
<div class="income-wrap">
    <G_header title="我的预估收入" />
    <van-tabs v-model="active" @change="getTopData">
        <van-tab title="当日">
            <div class="header-wrap">
                <div class="header clearfix">
                    <p>今日收入(元)</p>
                    <h1>{{ day }}</h1>
                </div>
            </div>
        </van-tab>
        <van-tab title="当周">
            <div class="header-wrap">
                <div class="header clearfix">
                    <p>本周收入(元)</p>
                    <h1>{{ week }}</h1>
                </div>
            </div>
        </van-tab>
        <van-tab title="当月">
            <div class="header-wrap">
                <div class="header clearfix">
                    <p>当月收入(元)</p>
                    <h1>{{ month }}</h1>
                </div>
            </div>
        </van-tab>
        <van-tab title="累计">
            <div class="header-wrap">
                <div class="header clearfix">
                    <p>累计收入(元)</p>
                    <h1>{{ all }}</h1>
                </div>
            </div>
        </van-tab>
    </van-tabs>
    <van-tabs v-model="actives">
        <van-tab title="分销记录">
            <van-list v-model="pinLoading" :finished="pinDinished" finished-text="没有更多了" @load="pinOnLoad">
                <template v-if="pinData">
                    <div class="items" v-for="(item,index) in pinData.data" :key="index">
                        <div>
                            <div class="title">
                                <van-image width="30" height="30" round :src="item.form.avatar || 'https://img.yzcdn.cn/vant/cat.jpeg'" />
                                <span style="vertical-align: 10px;"> {{ item.form.nickname }}</span>
                            </div>
                            <div class="time">
                                <p :class="item.type == 'Store' ? ' ' : 'dn'">商店购买获得分成</p>
                                <p>{{ item.created_at }}</p>
                            </div>
                        </div>
                        <div class="steats">
                            <span style="color: red">+ {{item.money}}</span>
                        </div>
                    </div>
                </template>
            </van-list>
        </van-tab>
        <van-tab title="每日分成">
            <div class="items">
                <div>
                    <div class="title">
                        卡夫威尔 32件套家用工具箱 工具套装 组套工具 组合套装工具 H2686A
                    </div>
                    <div class="time">
                        2019/9/10 16:52:55
                    </div>
                </div>
                <div class="steats">
                    未结算
                </div>
            </div>
        </van-tab>
    </van-tabs>
</div>
</template>

<script>
// import Vue from 'vue'
export default {
    name: 'income',
    data() {
        return {
            active: 0,
            actives: 0,
            day: null,
            week: null,
            month: null,
            all: null,
            pinLoading: true,
            pinDinished: false,
            pinData: null,
            pin_p_c: 1,
            pin_p_l: null
        }
    },
    created() {
        this.getTopData();
        this.getListData()
    },
    methods: {
        pinOnLoad() {
            this.getListData()
        },
        getTopData() {
            let token = sessionStorage.getItem("token");
            let params = {};
            params.token = token;
            if (this.active == 1) {
                if (this.week == null) {
                    this.axios.get('/api/reseller/dividend/stats/week', {
                        params
                    }).then(res => {
                        this.week = res.data.data
                    }).catch(err => {
                        console.log(err)
                    })
                }
            } else if (this.active == 2) {
                if (this.month == null) {
                    this.axios.get('/api/reseller/dividend/stats/month', {
                        params
                    }).then(res => {
                        this.month = res.data.data
                    }).catch(err => {
                        console.log(err)
                    })
                }
            } else if (this.active == 3) {
                if (this.all == null) {
                    this.axios.get('/api/reseller/dividend/stats/all', {
                        params
                    }).then(res => {
                        this.all = res.data.data
                    }).catch(err => {
                        console.log(err)
                    })
                }
            } else {
                if (this.day == null) {
                    this.axios.get('/api/reseller/dividend/stats/today', {
                        params
                    }).then(res => {
                        this.day = res.data.data
                    }).catch(err => {
                        console.log(err)
                    })
                }
            }

        },
        getListData() {
            let token = sessionStorage.getItem("token");
            let params = {};
            params.token = token;
            params.page = this.pin_p_c;
            if (this.pin_p_l == null || this.pin_p_c <= this.pin_p_c) {
                this.axios.get('/api/reseller/dividend/list/', {
                    params
                }).then(res => {
                    this.pin_p_c = res.data.current_page;
                    this.pin_p_l = res.data.last_page;
                    if(res.data.data.last_page == 1){this.pinLoading = false;this.pinDinished = true;}
                    if(res.data.data.current_page == 1){
                        this.pinData = res.data.data;
                    }else {
                        let data = [];
                        data = [...this.pinData.data,...res.data.data.data];
                    }
                    
                }).catch(err => {
                    console.log(err)
                })
            }else {
                this.pinLoading = false;
                this.pinDinished = true;
            }

        }
    }

}
</script>

<style lang="less" scoped>
.income-wrap {
    .header-wrap {
        padding: 5px 10px;

        .header {
            margin-top: 5px;
            padding: 10px 0;
            border-radius: 8px;
            width: 100%;
            color: white;
            background-image: linear-gradient(to bottom, rgb(234, 205, 113) 0%, rgba(214, 151, 91) 100%);

            h1,
            p {
                text-align: center;
                margin: .35rem 0;
                font-weight: 500;
            }

            .r {
                margin: 0 10px 0 0;
                background: rgba(231, 206, 152);
                color: white;
                border: none;
                border-radius: 4px;
                padding: 4px 8px;
                font-size: 12px;
            }
        }
    }
}

.items {
    background: white;
    margin-top: 5px;
    padding: 10px 20px;
    border-bottom: 1px solid rgba(170, 170, 170, .2);
    display: grid;
    grid-template-columns: 1fr 70px;
    grid-template-rows: 1fr;
    line-height: 22px;

    .time,
    .steats {
        color: rgba(0, 00, 0, .6)
    }

    .time p {
        margin: .25rem 0;
    }

    > :nth-child(2) {
        margin-right: 5px;
        line-height: 5rem;
        text-align: right;
    }
}
</style>
